<template>
  <div class="zk-top-nav">
    <div class="top-nav_box">
      <div class="top-nav_left">
        <ul class="left_box">
          <li class="left_box_li">
            <x-icon src="alert1" size="12"></x-icon>
          </li>
          <li class="left_box_li">欢迎来到阿拉博数
            <router-link to="/user/login" v-if="isLoginUser" class="login-link left_box_a">
              请登录
            </router-link>
            <router-link to="/user/reg" v-if="isLoginUser" class="reg-link left_box_a">
              免费注册
            </router-link>
            <router-link to="/user/index" v-if="!isLoginUser" class="user-name left_box_a">
              {{lUser.name}}
            </router-link>
            <span v-if="!isLoginUser" @click="removeLoginUser" class="login-out left_box_a">
              退出登录
            </span>
          </li>
        </ul>
      </div>
      <div class="top-nav_right">
        <ul class="right_box">
          <li class="li nav_right_li ">
            <router-link class="li-a" to="/index">首页</router-link>
          </li>
          <li class="right_box-li li">
            <router-link to="/user/index" class="pull-down li-a">会员中心
              <x-icon class="rotating" :pdisplay="pdisplay" src="zk-arrowsDownsmall" size="12"></x-icon>
            </router-link>
            <!-- <div class="disblok">
                <ul class="disblok-ul">
                  <li class="disblok-ul_li">
                    <router-link   to="/user/add">注册会员</router-link>
                  </li>
                </ul>
              </div> -->
          </li>
          <li class="right_box-li li">
            <router-link to="/order/index" class="pull-down li-a">订单中心
              <x-icon class="rotating" :pdisplay="pdisplay" src="zk-arrowsDownsmall" size="12"></x-icon>
            </router-link>
            <!-- <div class="disblok">
                <ul class="disblok-ul">
                  <li class="disblok-ul_li">
                    <router-link   to="">敬请期待</router-link>
                  </li>
                </ul>
              </div> -->
          </li>
          <!-- <li class="right_box-li li">
              <router-link   to="/user/favarite/index" class="pull-down li-a">我的收藏
                <x-icon class="rotating" :pdisplay="pdisplay" src="zk-arrowsDownsmall" size="12"></x-icon>
              </router-link>
              <div class="disblok">
                <ul class="disblok-ul">
                  <li class="disblok-ul_li">
                    <router-link   to="">敬请期待</router-link>
                  </li>
                </ul>
              </div>
            </li> -->
          <li class="right_box-li li">
            <router-link to="/articles/help/index" class="pull-down li-a">帮助中心
              <x-icon class="rotating" :pdisplay="pdisplay" src="zk-arrowsDownsmall" size="12"></x-icon>
            </router-link>
            <!-- <div class="disblok">
                <ul class="disblok-ul">
                  <li class="disblok-ul_li">
                    <router-link   to="">敬请期待</router-link>
                  </li>
                </ul>
              </div> -->
          </li>
          <li class="right_box-li li">
            <router-link to="/articles/topline/index" class="pull-down li-a">头条
              <x-icon class="rotating" :pdisplay="pdisplay" src="zk-arrowsDownsmall" size="12"></x-icon>
            </router-link>
            <!-- <div class="disblok">
                <ul class="disblok-ul">
                  <li class="disblok-ul_li">
                    <router-link   to="">敬请期待</router-link>
                  </li>
                </ul>
              </div> -->
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>

  import './var.scss'
  import './styles'


  import ala from 'ala'
export default {

    data () {
      return {
        widgetModel: '',
        qwe: '798',
        pdisplay: true,
        lUser: '',
        isLoginUser: true
      }
    },
    props: {
      widget: {}
    },
    async onShow () {
      this.init()
    },
    mounted () {
      this.init()
    },
    methods: {
      async  init () {
        if (!this.$ala.isLogin()) {
          this.isLoginUser = true
        } else {
          this.isLoginUser = false
          // this.lUser = this.$ala.localGet(this.$ala.userKey())
          this.lUser = this.$ala.user()
        }
        this.widgetModel = await this.$ala.themeWidget(this.widget)
      },
      removeLoginUser () {
        this.$ala.vuexSet('loginUser', null)
        this.$ala.localRemove(this.$ala.userKey())
        window.location.reload()
      },
      submitForm (forName) {
      }
    }
  }
</script>

<style   lang="scss">
  @import "~_style/theme.scss";

  .zk-top-nav {
    width: 100%;
    height: 40px;
    border-top: 1px solid #f2f6fc;
    border-bottom: 1px solid #dcdfe6;
    background: #333;
    .top-nav_box {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      .top-nav_left {
        .left_box {
          height: 100%;
          display: flex;
          align-items: center;
          .left_box_a:hover {
            text-decoration: underline;
          }
          .left_box_li {
            position: relative;
            font-size: 12px;
            color: #ccc;
            padding-left: 10px;
          }
          .left_box_li:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 12px;
            background: #b6b4b6;
          }
          .left_box_li:last-child:after {
            content: none;
          }
          .left_login,
          .left_reg {
            margin-left: 5px;
            font-size: 12px;
            color: #ccc;
          }
          .left_login:hover,
          .left_reg:hover {
            color: $gl-brand;
            border-bottom: 1px solid $gl-brand;
          }
        }
      }
      .login-link {
        color: $gl-brand;
        margin-left: 3px;
        padding: 0 5px;
      }
      .reg-link {
        color: #ccc;
        padding: 0 5px;
      }
      .login-out {
        color: #ccc;
        padding: 0 5px;
        cursor: pointer;
      }
      .user-name {
        color: $gl-brand;
      }
      .top-nav_right {
        flex: 1;
        .right_box {
          height: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .li {
            position: relative;
            height: 100%;
            height: 32px;
            line-height: 30px;
            margin-bottom: -1px;
            cursor: pointer;
            .li-a {
              display: block;
              font-size: 12px;
              padding: 0 10px;
              color: #ccc;
              .rotating {
                transition: all 0.3s;
              }
            }
          }
          .li:hover .rotating {
            transform: rotate(-180deg);
          }
          .li:hover .li-a {
            color: $gl-themeColor;
          }
          .li:last-child:after {
            content: none;
          }
          .li:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 12px;
            background: #b6b4b6;
          }
        }
      }
    }
  }

  .li:hover .disblok {
    display: block;
  }
  .disblok {
    display: none;
    width: 110px;
    background-color: $gl-light;
    border: 1px solid #dcdfe6;
    border-top: none;
    position: absolute;
    top: 30px;
    left: -1px;
    text-align: center;
    padding: 10px 0px;
    .disblok-ul {
      .disblok-ul_li {
        line-height: 22px;
        padding: 0px;
      }
      .disblok-ul_li:hover a {
        color: $gl-brand;
        text-decoration: underline;
      }
    }
  }

  // 收货地址页面
  .shipping-address {
    width: 850px;
    margin: 0 auto;
  }
  .address-title {
    width: 100%;
    padding: 6px 15px;
    background-color: $gl-light-info;
    color: #014d7f;
    font-size: 14px;
  }
  .new-address {
    color: #ffb822;
    padding: 0px 18px;
    margin: 20px 0px;
  }
  .distribution {
    width: 450px;
    padding-left: 10px;
  }
  .distribution-h6 {
    padding: 6px 15px;
    background-color: #f8f8f8;
    border-radius: 3px;
  }
  .distribution-h6_span {
    color: #909399;
    margin-right: 15px;
  }
  .theform {
    padding: 10px 10px;
  }
  .el-form-item__label {
    font-size: 12px;
    padding: 0px 2px 0px 0px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-select {
    width: 100%;
    font-size: 12px;
  }
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0px 15px;
  }
  .el-textarea__inner {
    resize: none;
    font-size: 12px;
    line-height: 14px;
    padding: 6px 5px;
  }
  .el-input {
    font-size: 12px;
  }
  .inputs {
    padding-right: 5px;
  }
  .el-checkbox__label {
    font-size: 12px;
  }
  .el-button {
    padding: 10px;
  }
  .checkbox {
    line-height: 10px;
  }
  .table {
    width: 850px;
    border-top: 1px solid #dcdee3;
    border-left: 1px solid #dcdee3;
  }
  .table-thead > tr {
    background-color: #ebecf0;
  }
  .table-thead > tr > th {
    border-right: 1px solid #dcdee3;
    border-bottom: 1px solid #dcdee3;
  }
  .table-thead > tr > th > div {
    padding: 10px 16px;
    text-align: left;
  }
  .th-div1 {
    width: 70px;
    text-align: center;
  }
  .th-div2 {
    width: 130px;
  }
  .th-div3 {
    width: 180px;
  }
  .th-div4 {
    width: 110px;
  }
  .th-div5 {
    width: 140px;
  }
  .th-div6 {
    width: 110px;
  }
  .th-div7 {
    width: 110px;
  }
  .list-tr > td {
    border-right: 1px solid #dcdee3;
    border-bottom: 1px solid #dcdee3;
  }
  .list-tr:hover {
    background-color: #ebecf0;
  }
  .list-tr > td > div {
    padding: 20px 16px;
  }
  .modify-box > a {
    display: inline-block;
    padding: 0px 5px;
    cursor: pointer;
  }
  .modify-box > a:hover {
    color: $gl-brand;
  }
  .set-to {
    cursor: pointer;
  }
  .set-to:hover {
    color: $gl-brand;
  }
  .default > a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px;
    border: 1px solid $gl-brand;
    color: $gl-brand;
    background-color: #ffb822;
  }
  .upgrade > a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 4px;
    border: 1px solid $gl-brand;
    color: $gl-light;
    background-color: $gl-brand;
  }
  .upgrade > a:hover {
    text-decoration: underline;
  }
</style>
